<template>
  <div class="w">

    <!-- 表单区 -->
    <Form style="padding-top: 35px;" 
      name="form" 
      ref="formRef" 
      :labelCol="{ span: 6 }" 
      :wrapperCol="{ span: 18 }" 
      :initialValues="form"
      @finish="formFinish">

      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="labToolName" label="工具名称" :rules="formRules.labToolName">
            <Input placeholder="请输入工具名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="release" label="版本号" :rules="formRules.release">
            <Input placeholder="请输入版本号" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
       <Row>
        <Col :span="20" :offset="0">
          <FormItem name="platform" label="适用平台" :rules="formRules.platform" style="position: relative;" class="selectPositionForm">
            <Select type="multiple" style="width:100%" :value="platformValue"  @change="platformsOnChange" allowClear :getPopupContainer="getPopupContainer">
              <Option v-for="item in refData.platforms" :key="item.value" :value="item.value" :label="item.label" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem label="工具介质">
             <test-upload  v-model="labToolMediaFile" uploadText="选取文件" :fileSize="500" :fileType="['rpm', 'deb', 'zip']"></test-upload>
          </FormItem>
         <!-- <span>{{labToolMediaFile}}</span> -->
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem label="工具使用手册">
            <test-upload  v-model="labToolHandBookFile" uploadText="选取文件" :fileType="['doc', 'docx', 'pdf']" :fileSize="500"></test-upload>
          </FormItem>
           <!-- <span>{{labToolHandBookFile}}</span> -->
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="remark" label="产品描述" :rules="formRules.remark">
            <TextArea placeholder="请输入产品描述" style="width: 100%; height: 200px;" />
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 25px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { addTool, updateTool,getTool } from "@/api/dotool/labtool";
import TestUpload from '@/components/upload'

export default {
  name: "app",
  components: {
    TestUpload
  },
  props: {
    labToolId: {
      type: Number,
      default: 0
    },
    currRow: {
      default: () => {}
    },
    refData: {
      default: () => {}
    }
  },
  data: function () {
    return {
      labToolMediaFile: '',
      labToolHandBookFile: '',
      platformValue: this.currRow.platform ? this.currRow.platform.split(',') : [],
      form: {
        labToolName: this.currRow.labToolName,
        release: this.currRow.release,
        remark: this.currRow.remark,
        platform: this.currRow.platform ? this.currRow.platform.split(',') : []
      },
      formRules: {
        labToolName: [
          { required: true, message: '请输入工具名称' },
        ],
        release: [
          { required: true, message: '请输入版本号' },
        ],
        remark: [
          { required: true, message: '请输入产品描述' },
        ],
        platform: [
          { required: true, message: '请选择适用平台' },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    // console.log("mounted labToolId: ", this.labToolId);
    // console.log("mounted currRow: ", this.currRow);
    // console.log("mounted refData: ", this.refData);
    
    if(this.labToolId) {
      getTool(this.labToolId).then(response => {
        console.log(response.data);
        this.labToolHandBookFile = response.data.labToolHandBookFile?response.data.labToolHandBookFile:''
        this.labToolMediaFile = response.data.labToolMediaFile?response.data.labToolMediaFile:''
      });
    }
  },
  watch: {
    
  },
  methods: {
    getPopupContainer() {
      return document.querySelector(".selectPositionForm")
    },
    selectFile(res) {
      console.log('resl:', res)
      this.labToolHandBookFile = res;
    },
    selectFile2(res) {
      this.labToolMediaFile = res;
    },
    platformsOnChange: function (val) {
      this.platformValue = val;
      // console.log("this.platformValue: ", this.platformValue.join(','));
      // console.log("val: ", val);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 业务属性
      this.form.platform = this.platformValue.join(',');

      // 提交表单请求
      this.isModalVisible = false;
      console.log("this.form: ", this.form);
      this.form.labToolMediaFile=this.labToolMediaFile===null ? null : this.labToolMediaFile.replaceAll('/profile/upload','');
      this.form.labToolHandBookFile=this.labToolHandBookFile===null ? null : this.labToolHandBookFile.replaceAll('/profile/upload','');
      console.log('111233:', this.form.labToolMediaFile)
      console.log(this.form.labToolHandBookFile)
      if (this.labToolId) {
        // 修改
        this.form.labToolId = this.labToolId;
        const rs = await updateTool(this.form);
        if (rs.code !== 200) return Message.error({ text: '修改工具信息失败：' + rs.msg });
        Message.success({ text: '修改工具信息完成' });
        this.handleCancel();

      } else {
        // 新增
        const rs = await addTool(this.form);
        if (rs.code !== 200) return Message.error({ text: '新增工具信息失败：' + rs.msg });
        Message.success({ text: '新增工具信息完成' });
        this.handleCancel();
      }
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }
</style>
